<template>
  <div class="app-container">
    <div class="btns">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="我的题库" name="first"></el-tab-pane>
        <el-tab-pane label="内置题库" name="second"></el-tab-pane>
      </el-tabs>
    </div>
    <el-form
      :model="searchParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
    >
      <el-form-item label="试题名称" prop="roleName">
        <el-input
          v-model="searchParams.questionName"
          placeholder="请输试题名称"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="searchTable"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="emptySearch"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    
    <el-col :span="24">
      <el-table :data="tableData" border>
        <el-table-column prop="questionName" label="题目名" align="center">
        </el-table-column>
        <el-table-column prop="questionType" label="题目类型" align="center">
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.questionType === 1"
              type="primary"
              disable-transitions
              >单选题</el-tag
            >
            <el-tag
              v-else-if="scope.row.questionType === 3"
              type="primary"
              disable-transitions
              >多选题</el-tag
            >
            <el-tag
              v-else-if="scope.row.questionType === 2"
              type="primary"
              disable-transitions
              >判断题</el-tag
            >
            <el-tag
              v-else-if="scope.row.questionType === 4"
              type="primary"
              disable-transitions
              >填空题</el-tag
            >
            <el-tag
              v-else-if="scope.row.questionType === 5"
              type="primary"
              disable-transitions
              >简答题</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button
              @click="queryQuDetail(scope.row.questionId)"
              type="text"
              size="small"
              >查看</el-button
            >
            <!-- <el-button
              v-if="activeName == 'first'"
              @click="updateQu(scope.row.questionId)"
              type="text"
              size="small"
              >编辑</el-button
            > -->
            <el-button
              v-if="activeName == 'first'"
              @click="delQu(scope.row.questionId)"
              type="text"
              size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-col>
    <el-row>
      <el-col>
        <pagination
          v-show="searchParams.total > 0"
          :total="searchParams.total"
          :page.sync="searchParams.pageNum"
          :limit.sync="searchParams.pageSize"
          @pagination="queryAll"
        />
      </el-col>
    </el-row>
    <AddQuestion ref="dialogRefs"></AddQuestion>
  </div>
</template>
  
<script>
import { getQuestionList, delQuestion } from "@/api/question/index";
import AddQuestion from "./addQuestion";
export default {
  components: {AddQuestion },
  data() {
    return {
     
      // 显示搜索条件
      showSearch: true,
      dialogTableVisible: false,
      tableData: [],
      searchParams: {
        pageNum: 1, //默认第一页
        pageSize: 10, //一页展示10条
        total: 0,
        questionName: "",
        customType: 1,
      },
      activeName: "first",
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.queryAll();
  },
  methods: {
    //tab页签
    handleClick(tab, event) {
      if (tab.label == "我的题库") {
        this.searchParams.customType = 1;
      } else if (tab.label == "内置题库") {
        this.searchParams.customType = 0;
      }
      this.queryAll();
    },

    //删除题目
    delQu(quId) {
      delQuestion({
        questionId: quId,
      }).then((res) => {
        if (res.code == 200) {
          this.queryAll();
        }
      });
    },
    // 点击页码及上一页下一页按钮操作
    currentChange(val) {
      this.searchParams.current = val;
      //刷新表格
      this.queryAll();
    },
    //每页展示几条按钮操作
    sizeChange(val) {
      this.searchParams.size = val;
      //刷新表格
      this.queryAll();
    },

    queryAll() {
      getQuestionList(this.searchParams).then((res) => {
        console.log(res);
        if (res.code === 200) {
          this.tableData = res.rows;
          this.searchParams.total = res.total;
        }
      });
    },
    //获取请求参数
    getFormParams() {
      return this.searchParams;
    },
    //搜索
    searchTable() {
      this.queryAll();
    },
    //重置搜索框
    emptySearch() {
      this.searchParams.questionName = "";
      this.queryAll();
    },
   
    // 题目详情
    queryQuDetail(quId) {
      this.$refs.dialogRefs.show(quId);
    },
  
  },
};
</script>